export default class borderDrag {
  constructor(el, drager) {
    this.el = el;
    this.drager = drager;
    this.x = 0;
    this.dis = 8;
    this.maxWidth = 765;
    this.isDown = false;
    this.init();
  }

  init() {
    if (this.el && localStorage.width) {
      this.el.style.width = localStorage.width;
    }
    this.createMask();
    this.mouseStyle();
    this.mousedown();
    this.mousemove();
    this.mouseup();
  }

  createMask() {
    // let mask = document.createElement("div");
    // mask.setAttribute("id", "bottom-mask");
    // mask.style.cssText =
    //   "position: absolute;left: 0;right: 0;top: -5px;bottom: 0;z-index: 100;display: none;";
    // this.el.appendChild(mask);
  }

  mouseStyle() {
    this.drager.onmousemove = (event) => {
      document.body.style.cursor = "default";
      if (event.offsetX < this.dis && event.offsetX > 0) {
        document.body.style.cursor = "e-resize";
      } else {
        document.body.style.cursor = "default";
      }
    };
    this.drager.onmouseout = () => {
      document.body.style.cursor = "default";
    };
  }

  mousedown() {
    this.drager.onmousedown = (event) => {
      if (event.offsetX < this.dis) {
        this.isDown = true;
        document.body.style["user-select"] = "none";
        // document.getElementById("bottom-mask").style.display = "block";
        this.x = event.clientX;
      }
    };
  }

  mousemove() {
    window.addEventListener(
      "mousemove",
      (event) => {
        if (!this.isDown) return;
        if (event.clientX <= 100 || event.clientX >= this.maxWidth) {
          return;
        }
        this.x = event.clientX;
        this.el.style.width = localStorage.width = this.x + "px";
      },
      false
    );
  }

  mouseup() {
    window.addEventListener(
      "mouseup",
      (event) => {
        event.preventDefault();
        if (this.isDown) {
          // if (document.getElementById("bottom-mask")) {
          //   document.getElementById("bottom-mask").style.display = "none";
          // }
        }
        this.isDown = false;
        document.body.style["user-select"] = "auto";
      },
      false
    );
  }
}
